<template>
  <div class="bg-all bg-image">
    <index-page-top></index-page-top>
    <div class="center-page">
      <answer-dom :showDown="showDown"></answer-dom>
      <question-dom></question-dom>
      <div class="back-down" v-show="showDown">
        <img @click="down" src="../assets/images/xia.png" alt="">
      </div>
    </div>
  </div>
  <div class="back" :class="{'acback':init}">
    <div class="back-com">
      <!--            <div class="tit">-->
      <!--                &lt;!&ndash;            <img class="ppp" src="../assets/images/ppp.png" alt="">&ndash;&gt;-->
      <!--                <div class="t1">您好，我是小旌</div>-->
      <!--                <div class="t2">我有多个身份，您可以通过选择我的以下能力来让我为您提供专业的服务</div>-->
      <!--            </div>-->
      <div class="com">
        <div class="li">
          <img @click="pointManage('b')" src="../assets/images/fileManage.png" alt="">
          <div>文件审核要点管理</div>
        </div>
<!--        <div class="li">-->
<!--          <img @click="selectType('b')" src="../assets/images/zxzs.png" alt="">-->
<!--          <div>政务智能咨询助手</div>-->
<!--        </div>-->
        <div class="li">
          <img @click="selectType('h2')" src="../assets/images/zczx.png" alt="">
          <div>企业增值化服务信息咨询助手</div>
        </div>
        <div class="li">
          <img @click="selectType('pr')" src="../assets/images/sh.png" alt="">
          <div>政务智能材料预审助手</div>
        </div>
      </div>
    </div>
  </div>
  <login ref="login"></login>
</template>

<script setup>

import IndexPageTop from "pages/component/indexPageTop.vue";
import QuestionDom from "pages/component/questionDom.vue";
import AnswerDom from "pages/answer-com/answerDom.vue";
import bus from "../utils/eventBus"
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import Login from "pages/component/login.vue";

let router = useRouter();
let init = ref(false)
let showDown = ref(false)
let login = ref(null)

onMounted(()=>{
  let timeNow = new Date().getTime();
  let timeLine = window.sessionStorage.getItem('timeLine') - 19920802
  let timeDifference = Math.abs(timeNow - timeLine);
  if (timeDifference <= 20 * 60 * 1000) {
    window['login'] = true;
  }else{
    login.value.showAlert();
  }
})

const selectType = (x) => {
  bus.$emit('selectType', x)
  init.value = true
}
const pointManage = () => {
  router.push('/file');
}
const down = () => {
  setTimeout(() => {
    let divElement = document.getElementById('answer');
    divElement.scrollTo({
      top: divElement.scrollHeight,
      behavior: "smooth" // 可选：平滑滚动
    });
    showDown.value = false
  }, 100)
}
setTimeout(()=>{
  let divElement = document.getElementById('answer');
  divElement.addEventListener('wheel', function(event) {
    if (event.deltaY < 0) {
      showDown.value = true //鼠标向上滚动
    }
    if (event.deltaY > 0) {
      if (divElement.scrollTop + divElement.clientHeight >= divElement.scrollHeight - 5) {
        console.log('鼠标在 div 上向下滚动到底部');
        // 在这里添加鼠标向下滚动到底部时的逻辑
        showDown.value = false;
      }
    }
  });
},100)
</script>
<style scoped lang="scss">
@import "../assets/indexPageBg.css";
strong{
    font-size: 16px!important;
}
.acback {
  transition: .2s all;
  opacity: 0;
  display: none !important;
}

.back {
  width: 100%;
  height: 100vh;
  //background-color: rgba(156, 156, 156, 1); /* 半透明的白色背景 */
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  //align-items: center;
  justify-content: center;


  //background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  //backdrop-filter: blur(10px); /* 添加模糊效果 */
  //padding: 20px;
  //border-radius: 10px; /* 可选，增加圆角 */

  .back-com {
    padding-top: 250px;

    .tit {
      padding-left: 20%;
      padding-bottom: 20px;
      font-size: 24px;
      border-bottom: 2px solid #e5e5e5;
      margin-bottom: 30px;
      position: relative;

      .ppp {
        position: absolute;
        left: 80px;
        bottom: 10px;
        width: 120px;
        height: 100px;
      }

      .t2 {
        font-size: 16px;
      }
    }

    .com {
      display: flex;
    }

    .li {
      margin: 0 60px;
      text-align: center;
      cursor: pointer;
      color: #ffffff;
      //background-color: white;
      padding: 0px;
      //box-shadow: 3px 3px 3px 3px #dedede;
      border-radius: 20px;

      img {
        width: 180px;
        height: 180px;
      }

      img:hover {
        transition: all .3s;
        scale: 1.2;
      }

      div {
        padding-top: 20px;
        font-size: 24px;
        //color: #ffffff;
        color: #878aab;
      }
    }
  }
}

.bg-all {
  width: 100%;
  height: 100vh;
  border-radius: 20px;
}

.center-page {
  width: 900px;
  margin: 0 auto;
  position: relative;
  .back-down{
    position: absolute;
    right: -60px;
    bottom: 180px;
    width: 50px;
    height: 50px;
    img{
      width: 100%;
      height: 100%;
    }
    img:hover{
      transition: all .3s;
      scale: 1.2;
      cursor: pointer;
    }
  }
}
</style>
